<template>
  <!-- 协力概览 -->
  <div class="overview">
    <div class="overview1">
      <h2>概観</h2>
      <div class="content">
        <div class="img">
          <img :src="info[1].image" alt />
        </div>
        <div class="text">
          <!-- <p v-html="info[1].desc"></p> -->
          <p class="writing">{{info[1].content}}</p>
          <a :href="info[1].file_input" target="_block">ダウンロード</a>
        </div>
      </div>
    </div>
    <div class="overview2_box">
      <div class="overview2">
        <h2>概念</h2>
        <div class="text" v-html="info[2].desc"></div>
        <div class="concept">
          <!-- <img class="imgX" src="@/assets/images/concept.png" alt /> -->
        </div>
      </div>
    </div>
    <div class="culture clearfloat">
      <h2>文化</h2>

      <div v-if="this.$store.state.headTitle.equipment == 'pc'" class="culture_box">
        <div class="culture_item" v-for="(item , index ) in culture" :key="index">
          <img :src="item.image" alt />
          <h6>{{item.title}}</h6>
          <p v-for="(i, index) in item.desc_array" :key="index" :class="i==0?'p1':''">{{i}}</p>
          <!-- <p>规模律师事务所</p> -->
        </div>
      </div>
      <div v-if="this.$store.state.headTitle.equipment == 'mobile'">
        <swiper :options="swiperOption">
          <swiper-slide class="swiper-slide" v-for="(item,index) in culture" :key="index">
            <div class="culture_item">
              <img :src="item.image" alt />
              <h6>{{item.title}}</h6>
              <p v-for="(i, index) in item.desc_array" :key="index" :class="i==0?'p1':''">{{i}}</p>
            </div>
          </swiper-slide>
                    <!-- 箭头左 -->
          <div
            id="swiper-button-prev1"
            class="swiper-button-prev"
            slot="button-prev"
          ></div>
          <!-- 箭头右 -->
          <div
            id="swiper-button-next1"
            class="swiper-button-next"
            slot="button-next"
          ></div>
        </swiper>
      </div>
    </div>
  </div>
</template>
<script>
import { company_type_list } from "@/api/about.js";
export default {
  data() {
    return {
      banner_list: 5,
      info: [],
      swiperOption: {
        slidesPerView: 'auto',
        // 鼠标控制滚动
        // mousewheel: {
        //   releaseOnEdges: true
        // },
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        //鼠标变成抓手型
        grabCursor: true,
        //开启鼠标滚轮控制Swiper切换
        mousewheel: true,
      },
    };
  },
  created() {
    company_type_list().then((res) => {
      console.log(res);
      res.data.data[3].map((item) => {
        item.desc_array = item.desc.split("；");
      });
      this.info = res.data.data;

      this.culture = this.info[3];
    });
  },
  methods: {},
};
</script>
<style scoped src="./sass/aboutUs.css"></style>